(function () {
    $(function () {
        $.fn.extend({
            // 菜单导航下拉
            DropDown() {
                class Drop {
                    constructor(cls) {
                        this.ele = cls;
                    }
                    down() {
                        this.ele.on("mouseenter", function () {
                            $(this).find(".drop").show();
                        }).on("mouseleave", function () {
                            $(this).find(".drop").hide();
                        })
                    }
                }
                new Drop(this).down();
            }
        })
        $.fn.extend({
            // 下拉替换
            DropHideShow() {
                this.on("mouseenter", function () {
                    $(this).find(".drop").show();
                }).on("mouseleave", function () {
                    $(this).find(".drop").hide();
                })
            }
        })
        $.fn.extend({
            dropchange() {
                this.on("mouseenter", function () {
                    $(this).find(".more").show();
                }).on("mouseleave", function () {
                    $(this).find(".more").hide();
                })
            }
        })
        $.fn.extend({
            // 放大镜
            loupe() {
                // 中区域的宽高
                let $width = (this.find(".bigbox").width() / this.find(".bigimg").width()) * this.find(".middleimg").width();
                let $height = (this.find(".bigbox").height() / this.find(".bigimg").height()) * this.find(".middleimg").height();
                // 大小区域的比例
                let $score = this.find(".bigbox").height() / $height;
                this.find(".middlearea").css({ "width": $width, "height": $height });
                this.find(".middlebox").on("mouseenter", function () {
                    $(this).find(".middlearea").show();
                    $(this).next().show();
                    $(document).on("mousemove", (e) => {
                        let midw = $(this).find(".middlearea").width();
                        let midh = $(this).find(".middlearea").height();
                        var mx = e.pageX - ($(this).find(".middleimg").offset().left) - midw / 2;
                        var my = e.pageY - ($(this).find(".middleimg").offset().top) - midh / 2;
                        if (mx <= 0) {
                            mx = 0;
                        }
                        if (mx >= $(this).width() - midw) {
                            mx = $(this).width() - midw;
                        }
                        if (my <= 0) {
                            my = 0;
                        }
                        if (my >= $(this).height() - midh) {
                            my = $(this).height() - midh;
                        }
                        $(this).find(".middlearea").css({ "left": mx, "top": my });
                        $(this).next().find(".bigimg").css({ "left": -mx * $score, "top": -my * $score });
                    })
                }).on("mouseleave", function () {
                    $(this).find(".middlearea").hide();
                    $(this).next().hide();
                });
                // 更换图片
                let self = this;
                this.find(".simglist").children().on("mouseenter", function () {
                    $index = $(this).index();
                    self.find(".middleimg").attr("src", "./images/" + ($index + 1) + "_2.jpg");
                    self.find(".bigimg").attr("src", "./images/" + ($index + 1) + "_3.jpg");
                    $(this).addClass("imghover").siblings().removeClass("imghover");
                });
                // 左右按钮移动
                $left = this.find(".left");
                $right = this.find(".right");
                $ul = this.find(".simglist");
                let lflag = false;
                let rflag = true;
                const dis = () => {
                    console.log(parseInt($ul.css("left")));
                    if (parseInt($ul.css("left")) == 0) {
                        $left.children().removeClass("leftarrow").addClass("ldisable");
                        lflag = false;
                        rflag = true;
                    }
                    if (parseInt(this.find(".simglist").css("left")) == -58) {
                        $right.children().removeClass("rightarrow").addClass("rdisable");
                        rflag = false;
                        lflag = true;
                    }
                }
                dis();
                // 左
                $left.on("click", function () {
                    if (!lflag) {
                        return;
                    }
                    $ul.css("left", 0);
                    dis();
                });
                $left.on("mouseenter", function () {
                    if (!lflag) {
                        return;
                    }
                    $(this).children().addClass("lhover").removeClass("lightarrow");
                }).on("mouseleave", function () {
                    $(this).children().addClass("lightarrow").removeClass("lhover");
                });
                // 右
                $right.on("click", function () {
                    if (!rflag) {
                        return;
                    }
                    $ul.css("left", -58);
                    dis();
                });
                $right.on("mouseenter", function () {
                    if (!rflag) {
                        return;
                    }
                    $(this).children().addClass("rhover").removeClass("rightarrow");
                }).on("mouseleave", function () {
                    $(this).children().addClass("rightarrow").removeClass("rhover");
                });
            }
        })
        $.fn.extend({
            // 垂直轮播图
            track() {
                let self = this;
                let index = 0;
                this.find(".trackmore .top").on("click", function () {
                    index--;
                    if (index < 0) {
                        index = 4;
                    }
                    console.log(index);
                    self.find(".trackcon .morelist").animate({
                        "top": -564 * index,
                    })
                });
                this.find(".trackmore .bottom").on("click", function () {
                    index++;
                    if (index >= 5) {
                        index = 0;
                    }
                    console.log(index);
                    self.find(".trackcon .morelist").animate({
                        "top": -564 * index,
                    })
                });
            }
        })
        $.fn.extend({
            // 手风琴 剩下的不收起
            slidedownup() {
                this.find("dl").on("click", function (e) {
                    if (e.target.nodeName != "I") {
                        return;
                    }
                    $(e.target).hasClass("ii")
                    if ($(e.target).hasClass("ii")) {
                        $(this).removeClass("open");
                        $(e.target).removeClass("ii");
                    } else {
                        $(this).addClass("open");
                        $(e.target).addClass("ii");
                    }

                })
            }
        })
        $.fn.extend({
            // tab栏切换
            tab() {
                let self = this;
                this.find(".tabmain").children().children().on("click", function () {
                    let index = $(this).index();
                    $(this).addClass("current").siblings().removeClass("current");
                    self.find(".tabcon").children().eq(index).addClass("current").siblings().removeClass("current");
                })
                this.find(".tabcon ul>li").on("mouseenter", function () {
                    $(this).find(".p-name").show();
                }).on("mouseleave", function () {
                    $(this).find(".p-name").hide();
                })
                this.find(".tabmain li").eq(3).on("click", function () {
                    self.find(".guarantee").show();
                    self.find(".comment").show();
                })
                this.find(".tabmain li").eq(4).on("click", function () {
                    self.find(".guarantee").hide();
                    self.find(".comment").show();
                })
                this.find(".tabmain li").eq(5).on("click", function () {
                    self.find(".guarantee").hide();
                    self.find(".comment").hide();
                })
            }
        })
    })

    $(function () {
        // 头部导航栏的下拉
        $(".dropdown").DropDown();
        $(".mobile").DropHideShow();
        // 菜单栏全部分类下拉
        $("#dropmenu").DropDown();
        $("#category").DropDown();
        // 我的购物车下拉
        $("#cart").DropDown();
        // 右边关注 客服  下拉
        $(".shopcaredown").DropDown();
        // 放大镜
        $("#preview").loupe();
        // 商品信息中的下拉
        $(".ybbox").DropDown(); $(".droptxt .title").dropchange();
        $(".tip").DropDown();
        $(".itembox .item").DropDown();
        // 垂直轮播图
        $("#track").track();
        // 手风琴 其它的不会隐藏
        $("#slide").slidedownup();
        // tab栏切换
        $("#tab").tab();
        $("ul.newlist").find("li").on("mouseenter", function () {
            $(this).find(".p-name").show();
        }).on("mouseleave", function () {
            $(this).find(".p-name").hide();
        })
        // tab栏切换  主体信息(评论..)
        $("#detail").tab();
        // 加入购物车 下拉
        $("#minicart").on("mouseenter", function () {
            $(this).find(".drop").show();
        }).on("mouseleave", function () {
            $(this).find(".drop").hide();
        })
        // 工具栏移除文字
        $(".tooltab").find(".icon").on("mouseenter", function () {
            $(this).next().stop().animate({ "left": -60 });
        }).on("mouseleave", function () {
            $(this).next().stop().animate({ "left": 35 })
        })
        $(".toolfoot").find(".icon").on("mouseenter", function () {
            $(this).next().stop().animate({ "left": -48 });
        }).on("mouseleave", function () {
            $(this).next().stop().animate({ "left": 35 })
        })
        $(".toolfoot #codeshow").on("mouseenter", function () {
            $(this).find(".drop").show();
        }).on("mouseleave", function () {
            $(this).find(".drop").hide();
        })
        $(".toolfoot .drop").find("span").on("click", function () {
            $(this).parent().hide();
        })
        $(".toolfoot .drop").on("mouseenter", function () {
            $(this).hide();
        })
        // 回到顶部
        $(".toolfoot #back").on("click", function () {
            $("html,body").animate({
                scrollTop: 0,
            })
        })
        // 下拉
        $(".comminfos .extra").on("mouseenter", function () {
            $(this).find(".others").show();
        }).on("mouseleave", function () {
            $(this).find(".others").hide();
        })

        // 
        $(".choosecolor").find(".colorbox").on("click", function () {
            $(this).addClass("selected").siblings().removeClass("selected");
        })
    })
})()